import React from 'react';
import ReactEcharts from 'echarts-for-react';

const EchartsTest = (props) => {
    const getOption = () => {
        const option = {
            title: {
                text: "客户数量",
                textStyle: {
                    fontSize: 12,
                },
                top: 0,
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: function (obj) {
                    let div = `
                        <div>
                            客户数量
                            <div style="display:flex;justify-content: center;align-items: center;">
                                <div style="margin-right:5px;border-radius:50%;width:10px;height:10px;background-color:${obj[0].color}">
                                </div>
                                ${obj[0].axisValueLabel} ${obj[0].value}
                            </div>
                        </div>
                    `
                    return div
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '5%',
                // top:,
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: ['汽车制造商', '分销商', '加盟商', '零售商', '医院', '其他医疗机构', '医疗设备生产商', '土建工程公司', '安装工程公司', '工程设备贸易公司', '连锁商超', '食品贸易公司', '代理商', '直接客户', '电子产品制造商', '食品生产公司',],
                    axisLabel: {
                        fontSize: 12,
                        color: '#000',
                        rotate: 40, // 文本旋转角度
                    },

                    axisTick: {
                        // alignWithLabel: true
                    },
                    axisLine: {					//---坐标轴 轴线
                        show: true,					//---是否显示
                        lineStyle: {
                            color: '#000',
                            width: 1,
                            type: 'solid',
                        },
                    },
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLine: {					//---坐标轴 轴线
                        show: true,					//---是否显示
                        lineStyle: {
                            color: '#000',
                            width: 1,
                            type: 'solid',
                        },
                    },
                }
            ],
            //图表滑动、缩放功能
            dataZoom: [
                {
                    show: false,
                    start: 0,
                    end: 100  //百分比
                },
                {
                    type: 'inside',
                    start: 100,
                    end: 100
                },
                {
                    show: true,
                    yAxisIndex: 0,
                    filterMode: 'empty',
                    width: 20,
                    height: '100%',
                    showDataShadow: false,
                    left: '100%'
                }
            ],
            series: [
                {
                    name: 'Direct',
                    type: 'bar',
                    barWidth: '60%',
                    barMaxWidth: '80%',
                    barMinWidth: '30%',
                    data: [15, 5, 22, 13, 8, 5, 6, 21, 14, 12, 13, 10, 8, 8, 10, 8],
                    label: {
                        show: true,
                        position: 'top'
                    },
                    itemStyle: {
                        normal: {
                            color: function (params) {
                                //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
                                let colorList = [
                                    '#26C0C0', '#B5C334', '#FCCE10', '#E87C25', '#27727B',
                                    '#FE8463', '#9BCA63', '#FAD860', '#F3A43B', '#60C0DD',
                                    '#D7504B', '#C6E579', '#F4E001', '#F0805A', '#C1232B',
                                    '#c0392b', '#7f8c8d', '#f39c12', '#16a085', '#8e44ad',
                                    '#ecf0f1', '#d35400', '#27ae60', '#95a5a6', '#2980b9',
                                    '#e74c3c', '#3498db', '#9b59b6', '#1abc9c', '#f1c40f',
                                    '#34495e', '#e67e22', '#2ecc71', '#bdc3c7', '#2c3e50'
                                ];
                                return colorList[params.dataIndex]
                            },
                        },
                    },
                }
            ]
        }
        return option;
    };
    return (
        <>
            <div>
                <div style={{ width: '100%', }}>
                    <ReactEcharts option={getOption()} />
                </div>
            </div>
        </>
    );
};

export default EchartsTest;

